import React from 'react';
import { Form, Button, TextField, Select, DataSet, NumberField } from 'choerodon-ui/pro';
import { Divider } from 'choerodon-ui';
import { connect } from 'dva';
import { LabelLayout } from 'choerodon-ui/pro/lib/form/enum';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import { StateType } from '../../model';
import styles from './index.less';

const { Option } = Select;

interface Step1Props {
  data? : StateType['step'];
  dispatch? : any;
  dataSet : DataSet;
}

const Step1 : React.FC<Step1Props> = props => {
  const { dispatch, data, dataSet } = props;

  if (!data) {
    return null;
  }
  /**
   * 第一步完成后点击下一步时
   * 1. 校验表单的几个字段
   * 2. 如果校验通过，更新状态树，跳转到下一页
   */
  const onValidateForm = async () => {
    await dataSet.validate()
    const valid = [
      'payAccount',
      'receiverAccount',
      'receiverName',
      'amount',
      'paymentType',
    ].every((name : string) => {
      const field = dataSet.current?.getField(name);
      return field?.getValue() && field?.isValid()
    });
    if (dispatch && valid) {
      dispatch({
        type: 'stepForm/saveCurrentStep',
        payload: 'confirm',
      });
    }
  };
  return (
    <>
      <Form
        dataSet={props.dataSet}
        labelLayout={LabelLayout.horizontal}
        className={styles.stepForm}
      >
        <Select name="payAccount" placeholder="test@example.com">
          <Option value="hzero-cli@hand-china.com">hzero-cli@hand-china.com</Option>
        </Select>
        <Select name="paymentType">
          <Option value="alipay">支付宝</Option>
          <Option value="bank">银行账户</Option>
        </Select>
        <TextField name="receiverAccount" placeholder="test@example.com" />
        <TextField name="receiverName" placeholder="请输入收款人姓名" />
        <NumberField name="amount" prefix="￥" placeholder="请输入金额" />
        <div>
          <Button color={ButtonColor.primary} onClick={onValidateForm}>
            下一步
          </Button>
        </div>
      </Form>
      <Divider style={{ margin: '40px 0 24px' }} />
      <div className={styles.desc}>
        <h3>说明</h3>
        <h4>转账到支付宝账户</h4>
        <p>
          如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
        </p>
        <h4>转账到银行卡</h4>
        <p>
          如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
        </p>
      </div>
    </>
  );
};

export default connect(({ stepForm } : { stepForm : StateType }) => ({
  data: stepForm.step,
}))(Step1);
